<template>
  <q-select v-bind="$attrs" v-on="$listeners">
    <template #prefix>
      <slot name="prefix" />
    </template>
    <template #empty>
      <slot name="empty" />
    </template>
    <q-option
      v-for="item in options"
      :key="item[config.value]"
      :label="item[config.label]"
      :value="item[config.value]"
      :disabled="item[config.disabled]"
    >
      <slot name="option" v-bind="item" />
    </q-option>
  </q-select>
</template>

<script>
export default {
  name: 'CustomSelect',
  inheritAttrs: false
};
</script>

<script setup>
defineProps({
  options: {
    type: Array,
    default: () => []
  },
  config: {
    type: Object,
    default: () => ({
      value: 'value',
      label: 'label',
      disabled: 'disabled'
    })
  }
});
</script>
